import React, { useState, useEffect } from 'react'
import logo from '../../assets/logo.svg'
import { GlobalOutlined } from '@ant-design/icons'
import { Layout, Typography, Input, Menu, Button, Dropdown } from 'antd'
import styles from './Header.module.css'
import { useSelector } from '../../redux/hook'
// import { useParams, useLocation, useNavigate } from 'react-router-dom'
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { useTranslation } from 'react-i18next'
import {
  changeLanguageActionCreator,
  addLanguageActionCreator
} from '../../redux/language/languageActions'
import jwtDecode, { JwtPayload as DefaultPayload } from 'jwt-decode'
import { userSlice } from '../../redux/user/slice'
interface JwtPayload extends DefaultPayload {
  username: string
}
// import { Dispatch } from 'redux'
// import { LanguageActionTypes } from '../../redux/language/languageActions'
export const Header: React.FC = () => {
  const navigate = useNavigate() // 页面处理
  const jwt = useSelector((s) => s.user.jwt)
  const shoppingCartItems = useSelector((s) => s.shoppingCart.items)
  const shoppingCartLoading = useSelector((s) => s.shoppingCart.loading)
  const [username, setUsername] = useState('')
  useEffect(() => {
    if (jwt) {
      const token = jwtDecode<JwtPayload>(jwt)
      setUsername(token.username)
    }
  }, [jwt])
  // const params = useParams()
  // console.log(params);

  // const location = useLocation() // 页面路由状态
  // console.log(location);
  const language = useSelector((state) => state.language.language)
  const languageList = useSelector((state) => state.language.languageList)
  // const dispatch = useDispatch<Dispatch<LanguageActionTypes>>()
  const dispatch = useDispatch()
  const { t } = useTranslation()
  const menuClickHandler = (e) => {
    if (e.key === 'new') {
      const action = addLanguageActionCreator('新语言', 'new_language')
      dispatch(action)
    } else {
      const action = changeLanguageActionCreator(e.key)
      dispatch(action)
    }
  }
  const onLogout = () => {
    dispatch(userSlice.actions.layout())
    navigate('/')
  }
  return (
    <div className={styles['app-header']}>
      <div className={styles['top-header']}>
        <div className={styles.inner}>
          <Typography.Text>{t('header.slogan')}</Typography.Text>
          <Dropdown.Button
            style={{ marginLeft: 15, display: 'inline-block' }}
            overlay={
              <Menu
                onClick={menuClickHandler}
                items={[
                  ...languageList.map((l) => {
                    return { key: l.code, label: l.name }
                  }),
                  { key: 'new', label: t('header.add_new_language') }
                ]}
              ></Menu>
            }
            icon={<GlobalOutlined />}
          >
            {languageList.find((l) => l.code === language)?.name}
          </Dropdown.Button>
          {jwt ? (
            <Button.Group className={styles['button-group']}>
              <span>
                {t('header.welcome')}
                <Typography.Text>{username}</Typography.Text>
              </span>
              <Button
                loading={shoppingCartLoading}
                onClick={() => {
                  navigate('/shoppingCart')
                }}
              >
                {t('header.shoppingCart')}({shoppingCartItems.length})
              </Button>
              <Button onClick={onLogout}>{t('header.signOut')}</Button>
            </Button.Group>
          ) : (
            <Button.Group className={styles['button-group']}>
              <Button
                onClick={() => {
                  navigate('/register')
                }}
              >
                {t('header.register')}
              </Button>
              <Button
                onClick={() => {
                  navigate('/login')
                }}
              >
                {t('header.signin')}
              </Button>
            </Button.Group>
          )}
        </div>
      </div>
      <Layout.Header className={styles['main-header']}>
        <img src={logo} alt="logo" className={styles['App-logo']} />
        <span
          onClick={() => {
            navigate('/')
          }}
        >
          <Typography.Title className={styles.title} level={3}>
            {t('header.title')}
          </Typography.Title>
        </span>
        <Input.Search
          className={styles['search-input']}
          placeholder={t('header.search')}
          onSearch={(keywords) => navigate(`/search/${keywords}`)}
        />
      </Layout.Header>
      <Menu
        className={styles['main-menu']}
        mode="horizontal"
        items={[
          { key: '1', label: t('header.home_page') },
          { key: '2', label: t('header.weekend') },
          { key: '3', label: t('header.group') },
          { key: '4', label: t('header.backpack') },
          { key: '5', label: t('header.private') },
          { key: '6', label: t('header.cruise') },
          { key: '7', label: t('header.hotel') },
          { key: '8', label: t('header.local') },
          { key: '9', label: t('header.theme') },
          { key: '10', label: t('header.custom') },
          { key: '11', label: t('header.study') },
          { key: '12', label: t('header.visa') },
          { key: '13', label: t('header.enterprise') },
          { key: '14', label: t('header.high_end') },
          { key: '15', label: t('header.outdoor') },
          { key: '16', label: t('header.insurance') }
        ]}
      ></Menu>
    </div>
  )
}
